<template>
	<view class="modal" :class="{'show': visible}">
		<view class="dialog">
			<view class="modal-header cu-bar justify-end">
				<view class="content">隐私保护政策</view>
			</view>
			<view class="modal-body">
				<scroll-view scroll-y class="body-scroll">
					<slot name="default"/>
					<slot name="custom"/>
				</scroll-view>
			</view>
			<view class="b-line"></view>
			<view class="modal-footer border cu-bar bg-white justify-end">
				<view class="action">
					<button class="cu-btn" @click="onClickCancel">不同意</button>
					<view class="a-line"></view>
					<button class="cu-btn" @click="onClickOk">同意</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		model: {
			prop: 'visible',
			event: 'change',
		},
		props: {
			//	对话框是否可见
			visible: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'default'
			}
		},
		mounted() {
		},
		methods: {
			//	取消
			onClickCancel (e) {
				this.$emit('cancel', e)
				this.$emit('change', false)
			},
			//	确定
			onClickOk (e) {
				this.$emit('ok', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-modal{
		z-index: $modal_zindex;
		.cu-dialog{
			width: 630rpx;
			border-radius: 24rpx;
			.modal-header{
				color: #333;
				background: #fff;
			}
			.modal-body{
				background: #fff;
				padding: 0 30rpx 30rpx;
				.body-scroll{
					height: 780rpx;
				}
			}
			.modal-footer{
				height: 90rpx;
				&:after {
					border-width: 1px 0 0 0;
				}
				.action{
					z-index: 1;
					width: 100%;
					margin: 0;
					display: flex;
					.cu-btn{
						flex: 1;
						height: 100%;
						transform: none;
						background: #fff;
						&:first-child{color: #999;}
						&:last-child{color: $theme_color;}
					}
				}
			}
			.a-line{
				width: 1px;
				height: 100%;
				background: #dedede;
				transform: scaleX(0.25);
				transform-origin: initial;
			}
			.b-line{
				width: 100%;
				height: 1px;
				background: #dedede;
				transform: scaleY(0.25);
				transform-origin: initial;
			}
		}
	}
	
	
	
	.modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000rpx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}
	
	.modal.show{
		opacity: 1;
		transition-duration: 0.3s;
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	
	.dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		width: 680rpx;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
</style>
